<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Website</title>
    <link rel="stylesheet" href="./style/my.css">
  <meta name="description" content="My Websit, Hello, I’m ZUM">
</head>
</head>

<body class="app">
    <header class="header">
        <div class="top w-content flex justify-between">
            <a class="navbar-brand" href="/">My Website</a>
            <a class="menu" href="javascript:;" title="菜单"></a>
            <nav class="menu-links">
                <a class="navlink" href="#js">技术栈</a>
                <a class="navlink" href="#yyah">业余爱好</a>
                <a class="navlink" href="#about">关于</a>
            </nav>
        </div>
        <div class="banner w-content flex justify-center items-center">
            <div class="banner-info text-center">
                <img class="banner-avator" src="./public/static/images/avator.png" alt="my">
                <h3 class="banner-text font-bold mt-30">
                    Hello, I’m ZUM
                </h3>
                <p class="banner-tag font-bold mt-30">前端工程师、全栈工程师</p>
            </div>
        </div>
    </header>
    <main class="w-content">
        <section id="js">
            <h2 class="section-title font-bold">我的技术栈</h2>
            <div class="section-wrapper">
                <div class="section-item item-bg-1">
                    <div class="mask"></div>
                    <span>JS/TS</span>
                    <div class="section-item-info">擅长控件和框架的设计,并在nodejs的服务端应用有一定经验</div>
                </div>
                <div class="section-item item-bg-2">
                    <div class="mask"></div>
                    <span>游戏</span>
                    <div class="section-item-info">一定的小游戏开发经验(使用TS)</div>
                </div>
                <div class="section-item item-bg-3">
                    <div class="mask"></div>
                    <span>C#</span>
                    <div class="section-item-info">分布式和微服务的服务端架构经验</div>
                </div>
                <div class="section-item item-bg-4">
                    <div class="mask"></div>
                    <span>Others</span>
                    <div class="section-item-info">了解PHP/Java/Python的一些基本运行和语言使用</div>
                </div>
            </div>
        </section>
        <section id="yyah">
            <h2 class="section-title font-bold">我的业余爱好</h2>
            <div class="section-wrapper">
                <div class="section-item">
                    <img src="./public/static/images/sheying.png" alt="摄影" />
                    <span>摄影</span>
                </div>
                <div class="section-item">
                    <img src="./public/static/images/qihang.png" alt="骑行" />
                    <span>骑行</span>
                </div>
                <div class="section-item">
                    <img src="./public/static/images/pingpangqiu.png" alt="乒乓球" />
                    <span>乒乓球</span>
                </div>
                <div class="section-item">
                    <img src="./public/static/images/yumaoqiu.png" alt="羽毛球" />
                    <span>羽毛球</span>
                </div>
            </div>
        </section>
    </main>
    <footer class="footer">
        <div class="w-content" id="about">
            <div class="footer-links">
                <a target="_blank" href="https://github.com/fengssy/f2e-train"><img alt="github"
                        src="https://github.com/fluidicon.png" /></a>
                <a target="_blank" href="https://gitee.com/fengssy"><img alt="gitee"
                        src="https://gitee.com/static/images/logo.svg?t=158106664" /></a>
                <a target="_blank"
                    href="https://www.iconfont.cn/user/detail?spm=a313x.7781069.1998910419.42&uid=8560443&nid=eyUuGdEJZVRb"><img alt="iconfont"
                        src="https://img.alicdn.com/imgextra/i2/O1CN01FF1t1g1Q3PDWpSm4b_!!6000000001920-55-tps-508-135.svg" /></a>
            </div>
            <div class="footer-copyright">
                <p class="footer-copyright-text">Copyright © 2020.ZUM</p>
            </div>
        </div>
    </footer>
    <script src="./scripts/index.js"></script>
</body>
</html>